<style type="text/css">
    .list-group-item:hover {
        color: #337ab7;
        text-shadow: 0 0 1em #337ab7;
        cursor: pointer;
    }

    .listgroupitemselected {
        border: 6px;
        border-color: black;
        background-color: #337ab7;
        color: white;
        cursor: pointer;
    }

    textarea {
        border: 0 none white;
        overflow: hidden;
        padding: 0;
        outline: none;
        background-color: #D0D0D0;
    }

    textarea.form-control {
        min-height: unset !important;
    }
    .secret {
        -webkit-text-security: disc;
    }
    .dimmed {
        opacity: 0.5; /* Adjust the value to control the dimness */
        color: #777; /* Adjust the color to a lighter shade */
    }
</style>

<div class="row">
    <div class="col">
        <!-- <input type="checkbox" ng-checked="ctrl.model.log_to_exchange"
        ng-click="ctrl.model.log_to_exchange = !ctrl.model.log_to_exchange; ctrl.submit()" value="1" id="ctrl.model.log_to_exchange" /><span ng-click="ctrl.model.log_to_exchange = !ctrl.model.log_to_exchange; ctrl.submit()">enabled streaming</span> to -->
        <a ng-href="#/Console">Console</a>
        <a class="btn" href ng-click="ctrl.SetState('all')" ng-class="{'btn-primary': ctrl.show == 'all'}"
            title="Show only new Workitemss">
            <span translate lib="web">all</span>
        </a>
        <a class="btn" href ng-click="ctrl.SetState('set')" ng-class="{'btn-primary': ctrl.show == 'set'}"
            title="Show only new Workitemss">
            <span translate lib="web">set</span>
        </a>
        <a class="btn" href ng-click="ctrl.SetState('unset')" ng-class="{'btn-primary': ctrl.show == 'unset'}"
            title="Show only new Workitemss">
            <span translate lib="web">unset</span>
        </a>
  
        <br>
        <br>
    </div>
</div>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
    
<div ng-repeat="setting in ctrl.settings" class="form-group" ng-show="ctrl.Show(setting)">
    <label ng-class="{'dimmed': ctrl.model[setting.name] == null}">{{ setting.name }} ({{ setting.type }}) 
        <a href="" ng-click="ctrl.deletekey(setting.name); $event.preventDefault(); $event.stopPropagation();">clear</a>
        ( default: {{ setting.default }}) <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true" title="Hang on, loading data"></em>
    </label>
    <!-- no-model does not work for boolens if type has not been set before parsing ng-type -->
    <input ng-model="ctrl.model[setting.name]" ng-if="setting.type != 'boolean' && !ctrl.isobject(ctrl.model[setting.name])"
        ng-model="ctrl.model[setting.name]" ng-enabled="ctrl.loading == false"
        ng-type step="{{ctrl.getstep(setting.name, ctrl.model[setting.name])}}"
        ng-on-blur="ctrl.submit()"
        ng-class="{'form-control': setting.type != 'boolean', 'secret': ctrl.model._encrypt.indexOf(setting.name) > -1, 'dimmed': ctrl.model[setting.name] == null }" />
    <!-- <three-stage-checkmark ng-if="setting.type == 'boolean' && !ctrl.isobject(ctrl.model[setting.name])"
    ng-model="ctrl.model[setting.name]"
    ng-click="ctrl.delayedUpdate()"></three-stage-checkmark> -->

    <input ng-checked="ctrl.model[setting.name]" ng-if="setting.type == 'boolean' && !ctrl.isobject(ctrl.model[setting.name])"
    type="checkbox" ng-enabled="ctrl.loading == false"
    ng-click="ctrl.Toggle(this, setting.name)"
    ng-class="{'form-control': setting.type != 'boolean', 'secret': ctrl.model._encrypt.indexOf(setting.name) > -1, 'dimmed': ctrl.model[setting.name] == null}" />

    <textarea  ng-class="{'dimmed': ctrl.model[setting.name] == null}" json-text class='form-control' rows='1' data-min-rows='1' ng-model="ctrl.model[setting.name]" 
    ng-enabled="ctrl.loading == false" ng-if="ctrl.isobject(ctrl.model[setting.name])"></textarea>
    

</div>
